<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: wupy
 * @LastEditTime: 2022-01-08 16:55:30
-->
<template>
  <!--1. 容器 -->
  <div ref="left2_container" id="container" style="height: 95%"></div>
</template>

<script>

import {Column} from '@antv/g2plot';
export default {
  data (){
    return{
       dataArr:[
          { spot: '汾河水库', num: 15000 },
          { spot: '天龙山景区', num: 20000 },
          { spot: '山西博物馆', num: 11000 },
          { spot: '中北大学', num: 10000 },
          { spot: '迎泽公园', num: 12000 },
          
       ]
     }
  },
created(){
  
},
mounted(){
this.initChart()
},
methods:{
 
initChart(){
  const column = new Column(this.$refs.left2_container,{
    data:this.dataArr,
    xField:'spot',
    yField:'num',

    tooltip:{
      fields:['spot','num'],
      domStyles:{
        'g2-tooltip':{
        padding:'5px',
        background:'rgba(47,6,170,0.8)',
        color:'#fff',
        fontSize:'16px',
        }
      }
    },

xAxis:{
  label:{
    rotate:-1,
    offset:5
  }
}
  })

  column.render();
}
}
}
</script>

<style scoped>

</style>